<template>
  <view class="login-container">
    <!-- 顶部标题 -->
    <view class="login-header">
      <text class="title">欢迎登录</text>
      <text class="subtitle">请选择登录方式</text>
    </view>

    <!-- 微信一键登录 -->
    <button 
      class="wx-login-btn" 
      open-type="getPhoneNumber" 
      @getphonenumber="handleWxLogin"
      :disabled="!agreed"
      :class="{disabled: !agreed}"
      v-if="isWeixin"
    >
      <image src="/static/wx-icon.png" class="wx-icon"></image>
      <text>微信手机号一键登录</text>
    </button>

    <!-- 短信验证码登录 -->
    <view class="sms-login" @click="toSmsLogin">
      <text>短信验证码登录</text>
      <uni-icons type="arrowright" size="16"></uni-icons>
    </view>

    <!-- 用户协议 -->
    <view class="agreement">
      <label class="checkbox-wrapper">
        <checkbox-group @change="toggleAgreement">
          <checkbox :checked="agreed" color="#07C160" style="transform:scale(0.8)"/>
        </checkbox-group>
        <text>我已阅读并同意</text>
      </label>
      <text class="link" @click="viewAgreement(0)">《用户协议》</text>
      <text>和</text>
      <text class="link" @click="viewAgreement(1)">《隐私政策》</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isWeixin: true,
      agreed: false
    }
  },
  methods: {
    handleWxLogin(e) {
      if (!this.agreed) {
        uni.showToast({ title: '请先同意用户协议', icon: 'none' });
        return;
      }
      
      if (e.detail.errMsg.includes('fail')) {
        uni.showToast({ title: '授权取消', icon: 'none' });
        return;
      }
      
      uni.showLoading({ title: '登录中...' });
      uni.login({
        provider: 'weixin',
        success: (loginRes) => {
          uni.request({
            url: this.$baseUrl + '/user_api/user/wx/login',
            method: 'POST',
            data: {
              code: loginRes.code
              //encryptedData: e.detail.encryptedData,
              //iv: e.detail.iv
            },
            success: (res) => {
              if(res.data.code == 0) {
				console.log("登录响应",res.data.data);
                uni.setStorageSync('userId', res.data.data.userId);
                uni.setStorageSync('nickName', res.data.data.nickName);
                uni.showToast({ title: '登录成功' });
                uni.navigateBack({
					fail() {
						console.log("返回失败")
					}
				})
              } else {
                uni.showToast({ title: res.data.msg || '登录失败', icon: 'none' });
              }
            },
            fail: () => {
              uni.showToast({ title: '网络错误', icon: 'none' });
            },
            complete: () => {
              uni.hideLoading();
            }
          });
        },
        fail: () => {
          uni.hideLoading();
          uni.showToast({ title: '微信登录失败', icon: 'none' });
        }
      });
    },
    
    toggleAgreement(e) {
      this.agreed = e.detail.value.length > 0;
    },
    
    viewAgreement(type) {
      uni.navigateTo({
        url: `/pages/agreement/agreement?type=${type}`
      });
    },
    toSmsLogin() {
      if (!this.agreed) {
        uni.showToast({ title: '请先同意用户协议', icon: 'none' });
        return;
      }
      uni.navigateTo({
        url: '/pages/smsLogin/smsLogin'
      });
    }
  }
}
</script>

<style scoped>
.login-container {
  padding: 80rpx 60rpx;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.login-header {
  margin-bottom: 100rpx;
  text-align: center;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #999;
}

.wx-login-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #07C160;
  color: white;
  border-radius: 45rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;
}

.wx-login-btn.disabled {
  background-color: #A0D8B3;
  opacity: 0.7;
}

.wx-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
}

.sms-login {
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
  font-size: 30rpx;
}

.agreement {
  position: fixed;
  bottom: 60rpx;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 24rpx;
  color: #999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  margin-right: 8rpx;
}

.link {
  color: #2979FF;
  margin: 0 8rpx;
}
</style>